<template>
  <div class="news-detail">
    <div class="content">
      <van-image v-if="news.imageUrl" :src="news.imageUrl" style="margin-bottom: 15px; border-radius: 8px;" />
      <h1>{{ news.title }}</h1>
      <p class="time" style="color: #999; font-size: 14px; margin: 10px 0;">{{ news.time }}</p>
      <p class="description" style="font-size: 16px; line-height: 1.6; color: #333;">{{ news.description }}</p>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();

// 从LocalStorage读取新闻数据（反序列化）
const newsStr = localStorage.getItem('currentNews');
const news = newsStr 
  ? JSON.parse(newsStr)  // 解析存储的JSON字符串
  : { 
      title: '未找到新闻', 
      time: '', 
      description: '请从首页点击新闻进入详情页' 
    };

// 可选：清除已读取的存储（根据需求决定是否保留）
// localStorage.removeItem('currentNews');
</script>

<style scoped>
.news-detail {
  padding: 20px;
  background: #fff;
  min-height: 100vh;
}
</style>